import styled from 'styled-components'
import { px2rem } from '@/assets/global-style'
export const Wrapper = styled.div `
    box-sizing: border-box;
    width: 100vw;
    height: 200vh;
    background-color: rgb(40, 44, 51);
    overflow: hidden scroll;
    .top{
        background-position: left top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100vw;
        height: 72vw;
        background-image: url("https://gw.alicdn.com/imgextra/i3/O1CN01mmj6kL25pOta1ItCK_!!6000000007575-2-tps-1000-720.png");
    }
    .head-content {
        position: relative;
        top:${px2rem(-220)};
        margin: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        place-content: flex-start center;
        align-items: center;
        width: 100vw;
        >img {
            width: ${px2rem(289)};
            height: ${px2rem(79)};
            object-fit: cover;
        }
        .keypoints {
            box-sizing: border-box;
            display: flex;
            position: relative;
            flex-direction: row;
            height: ${px2rem(50)};
            flex-shrink: 0;
            place-content: flex-start space-between;
            border-style: solid;
            border-color: black;
            margin: 2.4vw 15.3333vw;
            align-items: center;
            width:${px2rem(260)};
            /* z-index: 19; */
            color:white;
            .points {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .points-top {
                    margin-top: ${px2rem(5)};
                    font-size:${px2rem(18)};
                    margin-bottom: ${px2rem(10)};
                }
                .points-bottom {
                    font-size:${px2rem(13)}
                }
                
            }
        }
       
    }
    .keyview {
        /* position: relative; */
        /* z-index: 99; */
        margin-top: ${px2rem(-200)};
        /* top: ${px2rem(-50)}; */
        .view {
            margin-left: ${px2rem(10)};
            box-sizing: border-box;
            width: ${px2rem(105)};
            border-radius: ${px2rem(6)};
            height: ${px2rem(146)};
        }
    }
   .body {
    margin-top: ${px2rem(27)};
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color:white;
    z-index: 9;
    font-size: ${px2rem(15)};
    padding: 0  ${px2rem(14)};
    font-weight: 600;
    box-sizing:border-box;
    margin-bottom:${px2rem(10)};
    .city-body {
        box-sizing: border-box;
        height: 6.4vw;
        line-height: 6.4vw;
        border-radius: 3.2vw;
        background-color: rgba(19, 20, 21, 0.5);
        padding: 0 4vw;
        span{

        }
        .pos {
            width: 2.9333vw;
            height: 1.6vw;
        }
    }
    .cate-body {
        box-sizing: border-box;
        height: 6.4vw;
        border-radius: 3.2vw;
        background-color: rgba(19, 20, 21, 0.5);
        line-height: 6.4vw;
        padding: 0 4vw;
        border: 1px solid white;
    }
   }
   .adm-capsule-tabs-header {
        padding: 12px 12px;
        border-bottom: 0 solid;
    }
    .adm-scroll-mask-left {
        left: 0;
        background:inherit;
    }
    .adm-scroll-mask-right {
        right: 0;
        background: inherit
    }
   .adm-capsule-tabs-tab-active {
    color: #000;
    background-color: #fade31;
    }
    .adm-capsule-tabs-tab {
    box-sizing:border-box;
    position: relative;
    padding: ${px2rem(8)} ${px2rem(12)};
    margin: 0 auto;
    border-radius: ${px2rem(9)};
    cursor: pointer;
    font-size: ${px2rem(14)};;
    text-align: center;
    white-space: nowrap;
    }
    .card-list {
        border-color: black;
        align-items: center;
        box-sizing:border-box;
        margin: auto;
        width: ${px2rem(334)};
        padding-bottom: ${px2rem(6)};
        margin-bottom:  ${px2rem(12)};
        border-radius: 3.2vw;
        background-image: linear-gradient(135deg, rgb(255, 249, 236) 0%, rgb(252, 236, 202) 100%);
        .top-header {
            display: flex;
            flex-direction: row;
           justify-content: space-between;
            .top-left {
                font-size: ${px2rem(15)};
                white-space: nowrap;
                /* overflow: hidden; */
                display: flex;
                padding-left: ${px2rem(2)};
                width: ${px2rem(61)};
                height: ${px2rem(27)};
                line-height:${px2rem(15)};
                background: url("https://gw.alicdn.com/imgextra/i2/O1CN01kRC5iw1ZeLbQqd3er_!!6000000003219-2-tps-240-108.png") left top / 100% 100% no-repeat;
                flex-direction: row;
                align-items: center;
                .rank-text {
                    font-weight: 520;
                    box-sizing: border-box;
                    margin-left: ${px2rem(14)};
                    color:#000;
                    font-size: ${px2rem(13)};
                    font-style: italic;
                }
                .rate-count {
                    font-size: ${px2rem(12)};
                    transform: scaleX(0.9);
                    z-index: 3;
                    font-size: ${px2rem(13)};
                    white-space: nowrap;
                    margin-left: ${px2rem(25)};
                    color: rgb(132, 62, 16);
                }
                .rate-up-icon {
                    width: ${px2rem(8)};
                    height:${px2rem(10)};
                    margin-left:${px2rem(2)};
                }
            }
            .rate-view {
                height: ${px2rem(24.5)};
                display: flex;
                padding:0 ${px2rem(8)};
                background-color: rgb(255, 255, 255);
                border-radius: ${px2rem(12)};
                    .shoucang{
                    margin-top: ${px2rem(5)};
                    font-size: ${px2rem(12)};
                }
            }
        }
        .content-main {
            align-content: flex-start;
            display: flex;
            border-style: solid;
            border-color: black;
            margin: ${px2rem(9)} ${px2rem(12)};
            align-items: center;
            width: ${px2rem(327)};
            .main-left {
                width: ${px2rem(111)};
                height: ${px2rem(92)};
                background-color: rgb(242, 243, 245);
                border-radius: ${px2rem(6)};
            }
            .main-right {
                display: flex;
                flex-direction: column;
                margin: 0vw 0vw 0vw  ${px2rem(9)};
                padding: 0vw;
                min-width: 0vw;
                width: ${px2rem(207)};
                height: ${px2rem(92)};
                .main-right-top {
                    display: flex;
                    flex-direction: row;
                    justify-content:start;
                    font-size: ${px2rem(18)};
                    white-space: nowrap;
                    overflow: hidden;
                    line-height: ${px2rem(20)};
                    color: rgb(41, 44, 51);
                    font-weight: 500;
                    span {
                        max-width: ${px2rem(150)};
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    .poi-level {
                        margin: 0 0 0 ${px2rem(4)};
                        padding: 0 ${px2rem(6)};
                        font-size: ${px2rem(12)};
                        transform: scale(0.9);
                        white-space: pre-wrap;
                        height: ${px2rem(18)};
                        line-height: ${px2rem(18)};
                        font-weight: 500;
                        color: rgb(0, 191, 96);
                        background-color: rgb(237, 250, 243);
                        border-radius:  ${px2rem(3)};
                    }
                }
                .section-info {
                    display: flex;
                    flex-direction: row;
                    color: rgb(92, 95, 102);
                    margin-top:${px2rem(9)};
                    font-size: ${px2rem(12)};
                    .rate-text {
                        padding-right: ${px2rem(7)};
                    }
                    .price-text {
                        padding-left: ${px2rem(7)};
                        color: rgb(92, 95, 102);
                        border-left: 1px solid rgb(204, 204, 204);
                    }
                }
                .poi-tag-list {
                    display: flex;
                    flex-direction: row;
                    font-size: ${px2rem(13)};
                    .poi-tag-text {
                        margin-top:${px2rem(8)};
                        margin-right: ${px2rem(6)};
                        line-height:  ${px2rem(20)};
                        color: rgb(255, 115, 0);
                    }
                }
            }
        }
        .recommend-reason {
            margin: ${px2rem(9)} ${px2rem(12)};
            padding:${px2rem(2)} ${px2rem(5)};
            line-height: ${px2rem(18)};
            box-sizing: border-box;
            width: ${px2rem(310)};
            font-size: ${px2rem(13)};
            background-color: rgb(255, 229, 180);
            border-radius: ${px2rem(9)}
        }
    }
    .add {
        background-image:linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
    }
`